<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>解压游戏 - 解压一刻</title>
  <link rel="stylesheet" href="../styles.css" />
  <link rel="stylesheet" href="views.css" />
  <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</head>
<body>
  <div class="app-container">
    <!-- 顶部状态栏 -->
    <header class="app-header">
      <div class="page-title">
        <h2>解压游戏</h2>
      </div>
      <div class="user-profile">
        <img src="../assets/avatar.png" alt="用户头像" id="userAvatar" />
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content games-main">
      <!-- 游戏分类 -->
      <div class="games-filter">
        <button class="filter-btn active" data-filter="all">全部</button>
        <button class="filter-btn" data-filter="action">动作</button>
        <button class="filter-btn" data-filter="relax">休闲</button>
        <button class="filter-btn" data-filter="creative">创意</button>
      </div>

      <!-- 游戏列表 -->
      <div class="games-list">
        <!-- 像素小鸟 -->
        <div class="game-item" data-category="action">
          <div class="game-thumbnail">
            <img src="../assets/flappy-thumb.png" alt="像素小鸟" />
            <div class="game-duration">5-10分钟</div>
          </div>
          <div class="game-info">
            <h3>像素小鸟</h3>
            <p>重力感应飞行挑战，放松大脑的反应训练</p>
            <div class="game-stats">
              <span class="play-count">已玩 128 次</span>
              <span class="rating">★★★★☆</span>
            </div>
          </div>
          <button class="play-btn">开始游戏</button>
        </div>

        <!-- 飞刀结界 -->
        <div class="game-item" data-category="action">
          <div class="game-thumbnail">
            <img src="../assets/knife-thumb.png" alt="飞刀结界" />
            <div class="game-duration">3-5分钟</div>
          </div>
          <div class="game-info">
            <h3>飞刀结界</h3>
            <p>360°随机弹道闪避，释放压力的绝佳选择</p>
            <div class="game-stats">
              <span class="play-count">已玩 95 次</span>
              <span class="rating">★★★★★</span>
            </div>
          </div>
          <button class="play-btn">开始游戏</button>
        </div>

        <!-- 拟物泡泡纸 -->
        <div class="game-item" data-category="relax">
          <div class="game-thumbnail coming-soon">
            <img src="../assets/bubble-thumb.png" alt="拟物泡泡纸" />
            <div class="coming-soon-badge">即将上线</div>
          </div>
          <div class="game-info">
            <h3>拟物泡泡纸</h3>
            <p>模拟真实泡泡纸触感，指尖按压的解压体验</p>
            <div class="game-stats">
              <span class="play-count">敬请期待</span>
            </div>
          </div>
          <button class="play-btn disabled">敬请期待</button>
        </div>

        <!-- 动态沙画板 -->
        <div class="game-item" data-category="creative">
          <div class="game-thumbnail coming-soon">
            <img src="../assets/sand-thumb.png" alt="动态沙画板" />
            <div class="coming-soon-badge">即将上线</div>
          </div>
          <div class="game-info">
            <h3>动态沙画板</h3>
            <p>用手指创造流动的沙画艺术，释放创造力</p>
            <div class="game-stats">
              <span class="play-count">敬请期待</span>
            </div>
          </div>
          <button class="play-btn disabled">敬请期待</button>
        </div>

        <!-- 数字拼图 -->
        <div class="game-item premium" data-category="relax">
          <div class="game-thumbnail">
            <img src="../assets/puzzle-thumb.png" alt="数字拼图" />
            <div class="game-duration">10-15分钟</div>
            <div class="premium-badge">高级</div>
          </div>
          <div class="game-info">
            <h3>数字拼图</h3>
            <p>舒缓的拼图游戏，锻炼空间思维同时放松心情</p>
            <div class="game-stats">
              <span class="play-count">已玩 42 次</span>
              <span class="rating">★★★☆☆</span>
            </div>
          </div>
          <button class="play-btn">解锁高级</button>
        </div>
      </div>

      <!-- 最近游戏记录 -->
      <div class="recent-games">
        <h3>最近游玩</h3>
        <div class="recent-list">
          <div class="recent-item">
            <img src="../assets/flappy-icon.png" alt="像素小鸟" />
            <div class="recent-details">
              <span>像素小鸟</span>
              <span class="recent-time">今天 14:30</span>
            </div>
            <span class="game-score">最高分: 128</span>
          </div>
          <div class="recent-item">
            <img src="../assets/knife-icon.png" alt="飞刀结界" />
            <div class="recent-details">
              <span>飞刀结界</span>
              <span class="recent-time">昨天 20:15</span>
            </div>
            <span class="game-score">最高分: 45</span>
          </div>
        </div>
      </div>
    </main>

    <!-- 底部导航 -->
    <nav class="bottom-nav">
      <a href="../index.html" class="nav-item" data-page="home">
        <span class="nav-icon home-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
            <polyline points="9 22 9 12 15 12 15 22"></polyline>
          </svg>
        </span>
        <span class="nav-text">首页</span>
      </a>
      <a href="games.html" class="nav-item active" data-page="games">
        <span class="nav-icon games-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="2" y="6" width="20" height="12" rx="2"></rect>
            <line x1="6" y1="12" x2="10" y2="12"></line>
            <line x1="8" y1="10" x2="8" y2="14"></line>
            <circle cx="16" cy="12" r="2"></circle>
            <circle cx="18" cy="10" r="1"></circle>
          </svg>
        </span>
        <span class="nav-text">游戏</span>
      </a>
      <a href="assessment.html" class="nav-item" data-page="assessment">
        <span class="nav-icon assessment-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="20" x2="18" y2="10"></line>
            <line x1="12" y1="20" x2="12" y2="4"></line>
            <line x1="6" y1="20" x2="6" y2="14"></line>
            <rect x="2" y="20" width="4" height="1"></rect>
            <rect x="8" y="20" width="4" height="1"></rect>
            <rect x="14" y="20" width="4" height="1"></rect>
          </svg>
        </span>
        <span class="nav-text">评估</span>
      </a>
      <a href="profile.html" class="nav-item" data-page="profile">
        <span class="nav-icon profile-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
        </span>
        <span class="nav-text">我的</span>
      </a>
    </nav>
  </div>

  <script src="games.js"></script>
</body>
</html>